<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>兑换记录 - 记账助手</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <style>
        .history-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 30px 20px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        
        .history-header::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
            animation: float 6s ease-in-out infinite;
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(180deg); }
        }
        
        .history-icon {
            font-size: 48px;
            margin-bottom: 15px;
            animation: bounce 2s infinite;
        }
        
        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
            40% { transform: translateY(-10px); }
            60% { transform: translateY(-5px); }
        }
        
        .history-title {
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 8px;
            position: relative;
            z-index: 1;
        }
        
        .history-subtitle {
            font-size: 16px;
            opacity: 0.9;
            position: relative;
            z-index: 1;
        }
        
        .back-btn {
            position: absolute;
            top: 20px;
            left: 20px;
            background: rgba(255,255,255,0.2);
            border: none;
            color: white;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            cursor: pointer;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
            z-index: 2;
        }
        
        .back-btn:hover {
            background: rgba(255,255,255,0.3);
            transform: scale(1.1);
        }
        
        .history-container {
            padding: 20px;
        }
        
        .filter-tabs {
            background: white;
            border-radius: 16px;
            padding: 8px;
            margin-bottom: 20px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
            display: flex;
        }
        
        .filter-tab {
            flex: 1;
            background: transparent;
            border: none;
            padding: 12px;
            border-radius: 12px;
            font-size: 14px;
            font-weight: 600;
            color: #718096;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .filter-tab.active {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }
        
        .records-list {
            margin-bottom: 20px;
        }
        
        .record-item {
            background: white;
            border-radius: 16px;
            padding: 20px;
            margin-bottom: 15px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .record-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 30px rgba(0,0,0,0.12);
        }
        
        .record-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
        }
        
        .record-item.success::before {
            background: #48bb78;
        }
        
        .record-item.failed::before {
            background: #f56565;
        }
        
        .record-item.expired::before {
            background: #ed8936;
        }
        
        .record-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 15px;
        }
        
        .record-info {
            flex: 1;
        }
        
        .record-code {
            font-size: 16px;
            font-weight: 600;
            color: #2d3748;
            margin-bottom: 5px;
            font-family: 'Courier New', monospace;
            letter-spacing: 1px;
        }
        
        .record-type {
            font-size: 14px;
            color: #667eea;
            font-weight: 600;
        }
        
        .record-status {
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            text-align: center;
            min-width: 60px;
        }
        
        .status-success {
            background: #c6f6d5;
            color: #2f855a;
        }
        
        .status-failed {
            background: #fed7d7;
            color: #c53030;
        }
        
        .status-expired {
            background: #feebc8;
            color: #c05621;
        }
        
        .record-details {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            font-size: 14px;
        }
        
        .detail-item {
            display: flex;
            flex-direction: column;
        }
        
        .detail-label {
            color: #718096;
            margin-bottom: 4px;
            font-size: 12px;
        }
        
        .detail-value {
            color: #2d3748;
            font-weight: 600;
        }
        
        .empty-state {
            text-align: center;
            padding: 60px 20px;
            color: #718096;
        }
        
        .empty-icon {
            font-size: 64px;
            margin-bottom: 20px;
            opacity: 0.5;
        }
        
        .empty-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 8px;
            color: #4a5568;
        }
        
        .empty-desc {
            font-size: 14px;
            line-height: 1.5;
        }
        
        .stats-card {
            background: white;
            border-radius: 16px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
        }
        
        .stats-title {
            font-size: 16px;
            font-weight: 600;
            color: #2d3748;
            margin-bottom: 15px;
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
        }
        
        .stat-item {
            text-align: center;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 12px;
        }
        
        .stat-number {
            font-size: 24px;
            font-weight: 700;
            color: #667eea;
            margin-bottom: 5px;
        }
        
        .stat-label {
            font-size: 12px;
            color: #718096;
        }
    </style>
</head>
<body>
    <div class="screen">
        <div class="app-container">
            <div class="history-header">
                <button class="back-btn" onclick="history.back()">
                    ←
                </button>
                <div class="history-icon">📋</div>
                <div class="history-title">兑换记录</div>
                <div class="history-subtitle">查看所有兑换历史</div>
            </div>
            
            <div class="history-container">
                <div class="stats-card" id="statsCard">
                    <div class="stats-title">兑换统计</div>
                    <div class="stats-grid">
                        <div class="stat-item">
                            <div class="stat-number" id="totalCount">0</div>
                            <div class="stat-label">总兑换</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-number" id="successCount">0</div>
                            <div class="stat-label">成功</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-number" id="failedCount">0</div>
                            <div class="stat-label">失败</div>
                        </div>
                    </div>
                </div>
                
                <div class="filter-tabs">
                    <button class="filter-tab active" data-filter="all">全部</button>
                    <button class="filter-tab" data-filter="success">成功</button>
                    <button class="filter-tab" data-filter="failed">失败</button>
                </div>
                
                <div class="records-list" id="recordsList">
                    <!-- 记录将通过JavaScript动态加载 -->
                </div>
                
                <div class="empty-state" id="emptyState" style="display: none;">
                    <div class="empty-icon">📝</div>
                    <div class="empty-title">暂无兑换记录</div>
                    <div class="empty-desc">您还没有进行过任何兑换操作<br>快去获取兑换码体验会员特权吧</div>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        let currentFilter = 'all';
        let allRecords = [];
        
        // 页面加载时初始化
        $(document).ready(function() {
            loadRecords();
            updateStats();
            
            // 筛选标签点击事件
            $('.filter-tab').click(function() {
                $('.filter-tab').removeClass('active');
                $(this).addClass('active');
                currentFilter = $(this).data('filter');
                filterRecords();
            });
        });
        
        // 加载兑换记录
        function loadRecords() {
            // 从本地存储获取记录
            const storedRecords = localStorage.getItem('redeemRecords');
            if (storedRecords) {
                allRecords = JSON.parse(storedRecords);
            } else {
                // 如果没有记录，创建一些示例数据
                allRecords = [
                    {
                        id: 1,
                        code: 'VIP2024ABCD1234',
                        memberType: '年度会员',
                        redeemDate: '2024-01-15',
                        expireDate: '2025-01-15',
                        status: 'success'
                    },
                    {
                        id: 2,
                        code: 'MONTH2024EFGH567',
                        memberType: '月度会员',
                        redeemDate: '2024-02-20',
                        expireDate: '2024-03-20',
                        status: 'expired'
                    },
                    {
                        id: 3,
                        code: 'INVALID123456789',
                        memberType: '',
                        redeemDate: '2024-03-10',
                        expireDate: '',
                        status: 'failed'
                    }
                ];
            }
            
            filterRecords();
        }
        
        // 筛选记录
        function filterRecords() {
            let filteredRecords = allRecords;
            
            if (currentFilter !== 'all') {
                filteredRecords = allRecords.filter(record => record.status === currentFilter);
            }
            
            renderRecords(filteredRecords);
        }
        
        // 渲染记录列表
        function renderRecords(records) {
            const container = $('#recordsList');
            const emptyState = $('#emptyState');
            
            if (records.length === 0) {
                container.hide();
                emptyState.show();
                return;
            }
            
            emptyState.hide();
            container.show();
            
            const html = records.map(record => {
                const statusClass = getStatusClass(record.status);
                const statusText = getStatusText(record.status);
                
                return `
                    <div class="record-item ${record.status}">
                        <div class="record-header">
                            <div class="record-info">
                                <div class="record-code">${record.code}</div>
                                <div class="record-type">${record.memberType || '兑换失败'}</div>
                            </div>
                            <div class="record-status ${statusClass}">${statusText}</div>
                        </div>
                        <div class="record-details">
                            <div class="detail-item">
                                <div class="detail-label">兑换日期</div>
                                <div class="detail-value">${formatDate(record.redeemDate)}</div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-label">${record.status === 'success' ? '到期日期' : '失败原因'}</div>
                                <div class="detail-value">${record.status === 'success' ? formatDate(record.expireDate) : getFailureReason(record.status)}</div>
                            </div>
                        </div>
                    </div>
                `;
            }).join('');
            
            container.html(html);
            
            // 添加动画效果
            $('.record-item').each(function(index) {
                $(this).css({
                    'opacity': '0',
                    'transform': 'translateY(20px)'
                }).delay(index * 50).animate({
                    'opacity': '1'
                }, 300).css('transform', 'translateY(0)');
            });
        }
        
        // 更新统计信息
        function updateStats() {
            const total = allRecords.length;
            const success = allRecords.filter(r => r.status === 'success').length;
            const failed = allRecords.filter(r => r.status === 'failed').length;
            
            $('#totalCount').text(total);
            $('#successCount').text(success);
            $('#failedCount').text(failed);
        }
        
        // 获取状态样式类
        function getStatusClass(status) {
            switch (status) {
                case 'success': return 'status-success';
                case 'failed': return 'status-failed';
                case 'expired': return 'status-expired';
                default: return 'status-failed';
            }
        }
        
        // 获取状态文本
        function getStatusText(status) {
            switch (status) {
                case 'success': return '成功';
                case 'failed': return '失败';
                case 'expired': return '已过期';
                default: return '失败';
            }
        }
        
        // 获取失败原因
        function getFailureReason(status) {
            switch (status) {
                case 'failed': return '兑换码无效';
                case 'expired': return '会员已过期';
                default: return '未知错误';
            }
        }
        
        // 格式化日期
        function formatDate(dateString) {
            if (!dateString) return '-';
            const date = new Date(dateString);
            return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
        }
    </script>
</body>
</html>